import React, { useEffect, useState } from 'react'
import styles from './mine.module.scss'
import { Image, List, Button, Dialog, Toast } from 'antd-mobile'
import { User } from '../../type/user'
import { getUser } from '../../api/mine'
import { useHistory } from 'react-router-dom'
import { store } from '../../stores'

export default function Index () {
  const [userinfo, setUerInfo] = useState({} as User)
  const history = useHistory()
  const getUserData = async () => {
    const res = await getUser()
    setUerInfo(res.data)
  }
  useEffect(() => {
    getUserData()
  }, [])
  //退出
  const toExit = () => {
    Dialog.confirm({
      content: '是否退出？',
      confirmText: '确认',
      cancelText: '取消',
      onConfirm: () => {
        store.dispatch({ type: 'setToken', payload: '' })
        history.push('/login')
      }
    })
  }
  return (
    <div className={styles.myContainer}>
      <div className='header'>
        <Image
          src={userinfo.avatar}
          style={{ width: '6rem', height: '6rem', borderRadius: '50%' }}
        />
        <p className='nickname'>{userinfo.nickname}</p>
      </div>
      <List>
        <List.Item onClick={() => {}}>会员中心</List.Item>
        <List.Item onClick={() => {}}>我的订单</List.Item>
        <List.Item onClick={() => {}}>收货地址</List.Item>
        <List.Item onClick={() => {}}>我的足迹</List.Item>
        <List.Item onClick={() => {}}>我的收藏</List.Item>
        <List.Item onClick={() => {}}>意见反馈</List.Item>
      </List>
      <div className='footer'>
        <Button
          block
          color='danger'
          style={{ borderRadius: '24px', width: '90%', background: '#c82519' }}
          onClick={toExit}
        >
          退出
        </Button>
      </div>
    </div>
  )
}
